<!DOCTYPE html>
<!--
TODO implement pausing game
TODO implement stopping/quitting game
TODO add sound
TODO explore css sprites to reduce loading time
TODO translate in French
TODO upload to website (Tony's or Sainte-Anne?)
todo add background image at the end
todo add "you win" or "you lose!"
todo ask confirm to quit
todo add score
todo add second level
todo save high score with html storage
-->
<html>

<head> 

  <meta charset=utf-8>
  <title>Canvas Tutorial - Add Some Colour</title>

  <script src="../js/edit_area/edit_area_full.js"></script>
  <script src="../js/jquery-1.5.1.min.js"></script>
  <script src="../js/jquery-ui-1.8.13.custom.min.js"></script>
  <link rel="stylesheet" href="../css/jquery-ui.css" media="screen">
  <link rel="stylesheet" href="../css/custom.css">

  <script>
    // This code is meant to be automatically included in our template.

var editor = undefined;
var libEditor = undefined;
var intervalID = undefined;
var running = false;
var paused = false;
var speaker_on = false;
var user_response;

// hover states on the static widgets
$(function(){
  $('#dialog_link, ul#icons li').hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() { $(this).removeClass('ui-state-hover'); }
  );
});

// play button controls
$(function(){
  $("#play").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_play.png") {
        $(this).find("img").attr({src:"../images/orange_play.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/black_play.png"});
      }
    }
  );
});

$(function(){
  $("#play").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/green_play.png"});
        $("#stop").find("img").attr({src:"../images/black_stop.png"});
        running = true;
        runCode();
        return false;
      }
      if (paused){
        paused = false;
        $("#pause").find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

// pause button controls
$(function(){
  $("#pause").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_pause.png") {
          $(this).find("img").attr({src:"../images/orange_pause.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

$(function(){
  $("#pause").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/green_pause.png"});
        paused = true;
      }
      else{
        paused = false;
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
      return false;
    }
  );
});

// stop button controls
$(function(){
  $("#stop").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_stop.png") {
          $(this).find("img").attr({src:"../images/orange_stop.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
        $(this).find("img").attr({src:"../images/black_stop.png"});
      }
    }
  );
});

function update_buttons_after_stop(){
  // to be called by user in their own code as well as here.
  $("#play").find("img").attr({src:"../images/black_play.png"});
  $("#pause").find("img").attr({src:"../images/black_pause.png"});
  $("#stop").find("img").attr({src:"../images/red_stop.png"});
}

$(function(){
  $("#stop").click(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
          update_buttons_after_stop();
          clearInterval(intervalID);
          running = false;
          paused = false;
        }
        return false;
      }
    }
  );
});


// sound button controls
$(function(){
  $("#sound").hover(
    function () {
      if (speaker_on){
        $(this).find("img").attr({src:"../images/orange_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/orange_speaker.png"});
      }
    }, 
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
      }
    }
  );
});

$(function(){
  $("#sound").click(
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
        speaker_on = false;
      }
      else {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
        speaker_on = true;
      }
    }
  );
});

// next link controls
$(function(){
  $(".nextLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_forward.png") {
        $(this).find("img").attr({src:"../images/orange_forward.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_forward.png") {
        $(this).find("img").attr({src:"../images/black_forward.png"});
      }
    }
  );
});

// previous link controls
$(function(){
  $(".prevLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_back.png") {
        $(this).find("img").attr({src:"../images/orange_back.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_back.png") {
        $(this).find("img").attr({src:"../images/black_back.png"});
      }
    }
  );
});



function runCode() {
    if (intervalID != undefined)
        clearInterval(intervalID);
    $("#canvas")[0].getContext("2d").clearRect(0,0,
      $("#canvas")[0].width,
      $("#canvas")[0].height);

    //if there's a library defined, eval it
    if (libEditor != undefined) {
        eval(editAreaLoader.getValue("library"));
    }
        intervalID = eval(editAreaLoader.getValue("code"));
};

$(document).ready(function(){
      editAreaLoader.init({
                    id : "code"
                    ,syntax: "js"      
                    ,start_highlight: true
                    ,replace_tab_by_spaces: true
                    ,font_size: "11"
                  });
    

    var $tabs = $('#textcontainer').tabs();
        $tabs.tabs("remove", 2);
    $tabs.tabs("select", 1);  // tab 0 is the table of contents
});
  </script>

 </head>

  <body>



    <div id="header">
     <h1>Canvas Tutorial: Breakout!</h1>
    </div>


    <audio id="paddle_sound" preload>
      <source src="../sounds/kick11.wav" type="audio/x-wav">
      <source src="../sounds/kick11.ogg" type="application/ogg">
      <source src="../sounds/kick11.mp3" type="audio/mpeg">
    </audio> 

    <audio id="brick_sound" preload>
      <source src="../sounds/snare01.wav" type="audio/x-wav">
      <source src="../sounds/snare01.ogg" type="application/ogg">
      <source src="../sounds/snare01.mp3" type="audio/mpeg">
    </audio> 

    <audio id="wall_sound" preload>
      <source src="../sounds/kick6.wav" type="audio/x-wav">
      <source src="../sounds/kick6.ogg" type="application/ogg">
      <source src="../sounds/kick6.mp3" type="audio/mpeg">
    </audio> 

    <div id="canvascontainer">
         <canvas id="canvas" width="300" height="300"></canvas>
         <div id="controlIcons" style="text-align:center">
          <a id="play" href="#">
            <img src="../images/black_play.png" 
                 alt="run code" style="height:64px; border:none;"/>
          </a>
            <a id="pause" href="#">
            <img src="../images/black_pause.png" 
                 alt="pause" style="height:64px; border:none;"/>
          </a>
            <a id="stop" href="#">
            <img src="../images/black_stop.png" 
                 alt="stop" style="height:64px; border:none;"/>
          </a>
            <a id="sound" href="#">
            <img src="../images/black_speaker.png" 
                 alt="sound" style="height:64px; border:none;"/>
          </a>
             <!--<img class="runCode" src="../images/black_play.png" height="64px" onClick="runCode();"/> -->
         </div>
    </div>

    <div id="textcontainer">
      <h1 id="title">
            <a href="ball.html" class="prevLink">
              <img src="../images/black_back.png" 
               alt="previous page" style="width:64px; border:none;"/>
            </a>
        Add Some Colour
            <a href="move.html" class="nextLink">
              <img src="../images/black_forward.png" 
               alt="next page" style="width:64px; border:none;"/>
            </a>
      </h1>
      
      <ul>
          <li class="ui-tabs-nav-item"><a href="#toc"><span>Contents</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#explain"><span>Code</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#libraryContainer"><span>Library</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#comments"><span>Comments</span></a></li>
      </ul>

      <div id="toc">
        <ol>
               <li><a href="index.html"> Introduction</a></li>
               <li><a href="ball.html">Draw a Circle</a></li>
               <li><a href="colour.html">Add Some Colour</a></li>
               <li><a href="move.html">Action</a></li>
               <li><a href="library_.html">Library: an Interlude</a></li>
               <li><a href="bounce.html">Bounce!</a></li>
               <li><a href="sound.html">Sound</a></li>
               <li><a href="mute.html">Mute</a></li>
               <li><a href="paddle.html">Add a Paddle</a></li>
               <li><a href="keyboard.html">The Keyboard</a></li>
               <li><a href="mouse.html">The Mouse</a></li>
               <li><a href="bricks.html">The Bricks</a></li>
               <li><a href="finish.html">Finishing Touches</a></li>
               <li><a href="resources.html">Resources</a></li>
               <li><a href="test.html"> Introduction</a></li>
         </ol>
      </div>

      <div id="explain">
  We can also turn our ball different colours. Changing the value of
  ctx.fillStyle will change the canvas' current colour; we can set its value to a hex
  string of the format <code>"#rrggbb"</code> or to a string 
  <code>"rgba(r, g, b, a)"</code> where a, also known as alpha, is a value
  between 0 and 1, and representing the transparency of the colour.

               <div id="codebox">
               <textarea id="code" rows=20 cols=80>
var ctx = $('#canvas')[0].getContext("2d");

ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

//the square is half transparent
ctx.fillStyle = "rgba(255, 255, 0, .5)"
ctx.beginPath();
ctx.rect(15, 150, 120, 120);
ctx.closePath();
ctx.fill();
</textarea>
               </div>
               <p></p>

            <div id="experiment">
            <h2>Experiment!</h2>
            
    Try various values for the arguments to <code>arc</code> and 
    <code>rect</code>, and see how the shapes drawn are modified.  You can
    also add more shapes to the canvas.

            </div>
          
              <a href="ball.html" class="prevLink">
                <img src="../images/black_back.png" 
                 alt="previous page" style="height:64px; border:none;"/>
              </a>
          
              <a href="move.html" class="nextLink">
                <img src="../images/black_forward.png" 
                 alt="next page" style="height:64px; border:none;"/>
              </a>
          </br> <!-- leave room for next link image on first page -->
          <p style="font-size: 6px; color: gray;">Tutorial by Andr&eacute; Roberge</p>
      </div>
     
      <div id="libraryContainer">
      </div>

      <div id="comments">
      Nothing here yet
      </div>
    </div>

  </body>
</html>
